<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="" name="description">
    <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name="author">
    <meta content="Jekyll v3.8.6" name="generator">
    <title>登录</title>

    <!-- Custom styles for this template -->
    <link rel="stylesheet" th:href="@{/static/css/signin.css}" type="text/css">
    <link href="/static/css/fcicon.css" rel="stylesheet" th:href="@{/static//css/fcicon.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/static/css/shadow.css}" type="text/css">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        @media (max-width: 992px) and (min-width: 768px) {
            .login-box .form-col {
                width: 500px;
                height: 100%;
            }
        }

        @media (max-width: 992px) {
            .login-box img {
                display: none;
            }

            .form-signin {
                width: 100%;
                max-width: 450px;
                padding: 15px;
                margin: auto;
            }
        }

        .form-signin {
            width: 100%;
            max-width: 400px;
            padding: 15px;
            margin: auto;
        }

        .login-box .img-col {
            overflow: hidden;
        }

        .login-box .img-col img {
            margin-left: -15px;
            margin-right: -15px;
            max-height: 550px;
            /*max-width: 70%;*/
        }
    </style>
    <!-- Bootstrap core CSS -->
    <link href="../webjars/bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="../webjars/jquery/3.5.1/dist/jquery.js"></script>
    <script src="../webjars/bootstrap/3.4.1/js/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            const isChecked = $('#readFirst').prop('checked');
            const loginBtn = $('#loginBtn')
            if (!isChecked) {
                loginBtn.attr('disabled', 'disabled');
            } else {
                loginBtn.removeAttr('disabled');
            }
        });
    </script>
</head>
<body class="text-center">

<div class="login-box container-fluid">
    <div class="alert alert-info alert-dismissible fade in" role="alert">
        校徽字体源于<strong>封尘</strong><br>项目地址：https://gitee.com/lovefc/china_school_badge
    </div>
    <div class="row shadow-lg">
        <div class="col-lg-7 clearfix img-col">
            <img alt="" th:src="@{/static/img/login-img.jpg}">
        </div>
        <div class="col-lg-5 col-xs-12 clearfix form-col">
            <form action="/login/userLogin" class="form-signin" method="post">
                <i class="fc-icon-shnu fc-icon-da" style="color: #2a645a; font-size: 120px !important;"></i>
                <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
                <label class="sr-only" for="userAccount">账户</label>
                <input autofocus class="form-control" id="userAccount" name="userAccount" placeholder="账户" required
                       type="text">
                <label class="sr-only" for="userPassword">密码</label>
                <input class="form-control" id="userPassword" name="userPassword" placeholder="密码" required
                       type="password">
                <br>
                <div class="container btn-container">
                    <div class="row clearfix" style="margin-bottom: 2px;">
                        <button class="btn btn-primary col-12 btn-block" id="loginBtn" type="submit">登录</button>
                    </div>
                    <div class="row">
                        <!-- Button trigger modal -->
                        <button class="btn btn-success col-12 btn-block" data-target="#myModal" data-toggle="modal"
                                type="button">
                            管理员登陆
                        </button>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input id="readFirst" name="readFirst" type="checkbox" value="">
                                <a data-target="#readFirstModal" data-toggle="modal" href="#">使用前必读</a>
                            </label>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <a class="col-12 btn btn-link" href="/login/register" id="registerLink">暂无账号？注册</a>
                    </div>
                </div>
                <br>
                <p class="mt-5 mb-3 text-muted">&copy; 2020-2020 能力有限公司</p>
            </form>
        </div>
    </div>
</div>
</body>
<!-- Modal -->
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">管理员登陆</h4>
            </div>
            <div class="modal-body">
                <img alt="" class="img-responsive img-thumbnail"
                     src="../static/img/admin-img.jpeg" style="width: 200px; height: 200px;">
                <hr>
                <form action="/login/adminLogin" class="form-signin" method="post">
                    <input autofocus class="form-control" id="adminAccount" name="adminAccount" placeholder="管理员账户"
                           required type="text">
                    <input class="form-control" id="adminPassword" name="adminPassword" placeholder="管理员密码"
                           required type="password">
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                        <button class="btn btn-primary" type="submit">登陆</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<div aria-labelledby="myModalLabel" class="modal fade" id="readFirstModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="readFirstLabel">使用前必读</h4>
            </div>
            <div class="modal-body">
                <img alt="" class="img-responsive img-thumbnail"
                     src="../static/img/read-first-img.jpg" style="width: 200px; height: 200px;">
                <hr>
                <p th:text="${sysInfo}"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        const readFirst = document.getElementById('readFirst');
        console.log(readFirst);
        const loginBtn = document.getElementById('loginBtn');
        readFirst.onclick = function () {
            if (readFirst.checked) {
                loginBtn.removeAttribute('disabled');
            } else {
                loginBtn.setAttribute('disabled', 'disabled');
            }
        }
    }
</script>
</html>
